<template>
  <div class="holidayPartyDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">节日/派对详情</x-header>
    <div class="topHolder"></div>
    <card :header="{title:'节日/派对创建时间：' + holidayParty.CREATE_DATETIME}" :footer="{title:'有效时间：' + holidayParty.START_DATETIME + ' 至 ' + holidayParty.END_DATETIME}">
      <div slot="content" class="card-padding">
        <span v-text="holidayParty.PARTY_NAME"></span>
      </div>
    </card>
    <card :header="{title:'预订详情：'}">
      <div class="card-padding" slot="content">
        <div class="description" v-html="getRichText(holidayParty.DESCRIPTION)"></div>
      </div>
    </card>
    <box gap="1rem 0.8rem">
      <x-button :gradients="['#FF5E3A', '#FF9500']" @click.native="gotoAdd" :show-loading="loadingStatus" :disabled="loadingStatus" text="立刻预订"></x-button>
    </box>
  </div>
</template>

<script>
  import { Box, Card, XButton } from 'vux'
  import {contextPath,getHolidayPartyById} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'holidayPartyDetail',
    data(){
      return{
        contextPath:contextPath,
        showHeaderBack:this.GLOBAL.showHeaderBack,
        paramHolidayPartyId:this.$route.params.holidayPartyId,
        loadingStatus:true,
        holidayParty:{}
      }
    },
    components:{
      Box,
      Card,
      XButton
    },
    computed:{

    },
    methods:{
      gotoAdd(){
        this.$router.push({name:'增加预订',params:{subscribe:this.paramHolidayPartyId}})
      },
      getRichText(description){
        var result = description,reg = /<img[^>]*src[=\'\"\s]+([^\"\']*)[\"\']?[^>]*>/gi;
        while (reg.exec(result)){
          let item = RegExp.$1
          if(item.indexOf('http') < 0)result = result.replace(item,this.contextPath + item)
        }
        return result
      }
    },
    mounted(){
      getHolidayPartyById(this.paramHolidayPartyId).then((res)=>{
        if(res.status == 'success'){
          this.holidayParty = res.data
          this.loadingStatus = false
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getHolidayPartyById error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getHolidayPartyById catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .holidayPartyDetail{
  }
</style>
